<template>
  <div>
    <div class="main">
      <div class="titleBox">
        <div class="cover ncss_row">
          <!-- <h3> 头部广告 </h3> -->
          <div class="header_imgbox">
            <p class="">
              <a class="imgboxContent" @click="toList">MASK-DONTFOEC-HITEC </a> 
              <!-- <a href="" style="color:#FFF">GOGOGO</a> -->
            </p>
            
            <img src="/static/index/nikepic1.png" alt="">
          </div>
        </div>
      </div>

      <div class="contentBox">
        <div class="contentinfo_1 ncss_row">
          <div class="contentinfo_2">
            <div>
              <div class="contentinfo_3">
                <h3 class="contentinfo_3_title">不改少年狂</h3>
                <div class="contentinfo_3_detail"> <p>走？和我吃海底捞去！</p></div>
                <div class="contentinfo_3_btn">
                  <button class="contentinfo_3_btn_link" @click="toList">
                    解锁「年跃新高」系列
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="AcBox">
        123
      </div> -->

      <div class="recommendBox">
        <div class="reInfo ncss_row">
          <div class="reInfo_2">
            <div>
              <div class="reInfo_3">
                <div class="reInfo_4">
                  <div class="reInfo_img">
                    <div class="reInfo_img_1">
                      <a @click="toList" style="cursor:point;">
                         <img src="/static/index/nikejordan1.png" alt="jordan">
                      </a>
                     
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="reInfo_content">
            <div class="reInfo_content_1">
              <p class="reInfo_content_1_p1"> MASK Invincible 3｜全数感触 以带鞭笞</p>
              <p class="reInfo_content_1_p2"> 强化动能 全新冀感 极致体验</p>
            </div>
            <div class="reInfo_content_btn">
              <button class="reInfo_content_btns" @click="toList"><span>即刻体验</span> </button>
            </div>
          </div>

          <div class="flu_imgBox">
            <div class="flu_swiper">
              <!-- <p>轮播图</p> -->
              <div style="width:100%;margin:0 auto;padding-bottom:20px;">
                <!--   -->
                <el-carousel  type="card" height="500px" width="1200px"
                class="index_info_carousel" indicator-position="none" loop="true"
                  arrow="never" interval="3000">
                  <el-carousel-item v-for="(item,index) in indexNewsList" :key="index">
                    <div class="index_info_item">
                      <img :src="item.url" alt="nope">
                      <!-- <h1 class="index_info_content">{{ item.content }}</h1> -->
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- ncss_row -->
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      msg: '',
       indexNewsList:[ 
          { 
            value: 1, 
            url:'./static/index/nikejordan2.png',
            content: "12月27日至1月10日，精选产品低至6折，Mask会员更可专享全场商品(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减惠特定商品除外至高90元额外满减优惠及指定NBY产品200元额外满减优惠",
          },{ 
            value: 2, 
             url:'/static/index/nikejordan3.png',
            content: "Members get free shipping and free 30-day returns. Members get free shipping and free 30-day returnsMembers get free shipping and free 30-day returnsJoin us Learn more",
          },{ 
            value: 3, 
             url:'/static/index/nikejordan4.png',
            content: "价格说明（此说明仅当出现价格比较时有效)划线价格：划线的价格是商品的建议零售价供您参考。 未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券、折扣等情况发生变化，最终以订单结算页价格为准。",
          },{ 
            value: 3, 
             url:'/static/index/nikejordan5.png',
            content: "价格说明（此说明仅当出现价格比较时有效)划线价格：划线的价格是商品的建议零售价供您参考。 未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券、折扣等情况发生变化，最终以订单结算页价格为准。",
          },{ 
            value: 3, 
             url:'/static/index/nikejordan6.png',
            content: "价格说明（此说明仅当出现价格比较时有效)划线价格：划线的价格是商品的建议零售价供您参考。 未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券、折扣等情况发生变化，最终以订单结算页价格为准。",
          }
    ],
     
    }
  },
  methods: {
    toList(){
      this.$router.push('/list');
    }
  },
  mounted () {

  }
}
</script>

<style scoped>
div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a{
  color: #111;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
/* .main{

} */
.ncss_row{
    font-size: 0;
    margin-left: -6px;
    margin-right: -6px;
}
.titleBox{
    padding-left: 0;
    padding-right: 0;
    margin-left: 48px;
    margin-right: 48px;
    max-width: 1824px;
    width: auto;
    height: auto;
}
.header_imgbox{
  /* margin-top: 5px; */
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* width:1000px; */
  height:500px;
}
.header_imgbox img{
  /* height: 300px; */
/* max-width:100%; */
width: 100%;
height:500px;
}
.imgboxContent{
position: absolute;
left: 30%;
margin-top: -50px;
/* top: 20px; */
font-size: 50px;
color: #fff;
font-weight: 700;
}

.cover{
  /* border: 1px solid red; */
  height: 500px;
  font-size: 20px;
  text-align: center;
}
 

.contentBox{
  display: block;
  position: relative;
  margin-left: 48px;
  margin-right: 48px;
  margin-bottom: 1px;
  max-width: 1824px;
  /* border: 1px solid red; */
  width: auto;
}
.contentinfo_1{
  position: relative;
}
.contentinfo_2{
  width: 100%;
  display: inline-block;
  vertical-align: top;
  padding-left: 6px;
  padding-right: 6px;
}

.contentinfo_3{
  background-color: transparent;
  text-align: center;
}
.contentinfo_3_title{
  margin-bottom: 0;
  font-weight: 500;
  color: #111;
  font-size: 32px;
  line-height: 44px;
}
.contentinfo_3_detail{
  margin-top: 24px; 
  font-size: 16px;
  line-height: 24px;
  color: #111;
}
.contentinfo_3_btn{
    margin-bottom: 0;
    margin-top: 24px;
}
.contentinfo_3_btn_link{
    padding: 6px 20px;
    border-radius: 30px;
    border: 1.5px solid transparent;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #111;
    color: rgb(254, 254, 254);
      cursor: pointer;
}

.AcBox{
  margin-top: 20px;
  max-width: 1824px;
  width: auto;
  position: relative;
  height: 100px;
  border: 1px solid purple;
}


.recommendBox{
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin-top: 48px;
  margin-left: 48px;
  margin-right: 48px;
  margin-bottom: 48px;
  max-width: 1824px;
  width: auto;
}
.reInfo{
  color: rgb(17, 17, 17);
}
.reInfo_2{
  vertical-align: top;
  width: 100%;
  display: inline-block;
  margin-left: 0;
  font-size: 16px;
  line-height: 1.75;
    padding-left: 6px;
    padding-right: 6px;
}
.reInfo_3{
  position: relative;
  height: 100%;
}
.reInfo_4{
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    flex-grow: 1;
    pointer-events: auto;
}
.reInfo_img{
  aspect-ratio: 3.608;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.reInfo_img_1{
width: 100%;
height:500px;
text-align: center;
}
.reInfo_img_1 img{
  height:500px;
  position: relative;
  /* left: 20px; */
  
}



.reInfo_content_1{
  /* background-color: #ffffff; */
  /* z-index: 11; */
  font-size: 30px;
  font-weight: 500;
  margin-top: 20px;
  text-align: center;
  color: black;
}
.reInfo_content_p1_p1{
  margin-top: 10px;
  /* margin-bottom: 10px; */
}
.reInfo_content_1_p2{
  margin-top: -10px;
  font-size: 20px;
}
.reInfo_content_btn{
    margin-bottom: 0;
    margin-top: 24px;
    text-align: center;
     /* width: 200px;
     height: 100px; */
    /* font-size: 10px; */
}
.reInfo_content_btns{
    padding: 6px 20px;
    font-size: 16px;
    border-radius: 30px;
    border: 5px solid transparent;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #111;
    color: rgb(254, 254, 254);
    cursor: pointer;
}
.reInfo_content_btns span{
  position: relative;
  top: -1px;
}


.flu_imgBox{
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin-top: 48px;
  margin-left: 48px;
  margin-right: 48px;
  margin-bottom: 48px;
  max-width: 1824px;
  width: auto;
  font-size: 20px;
}

.flu_swiper{
  height: 500px;
  /* border: 1px solid red; */
  text-align: center;
  
}
.index_info_carousel{
margin-bottom: 20px;
}
.index_info_item img{
  width: 800px;
  height: auto;
}


</style>
